<template>
  <el-container style="position:absolute;right:15%;left:15%;width: 70%;height: 100%;background-color:#ffffff;">
    <el-header height="20%">
      <el-carousel
        ref="carousel"
        @click.native="linkTo"
        style="cursor:pointer"
      >
        <el-carousel-item
          v-for="(item,index) in imglist"
          :key="index"
          class="el-carousel__item"
        >
          <img
            class="carousel-image"
            v-bind:src="item.url"
            alt="Loading"
          >
        </el-carousel-item>
      </el-carousel>
    </el-header>
    <el-main>
      <el-container style="text-align:left;">
        <el-aside width="20%">
          <Hotquestion style="padding:0px;"></Hotquestion>
        </el-aside>
        <el-main align="middle">
          <img
            src="../assets/疫情.jpg"
            width="400px"
            style="margin-top:20px"
          >
          <el-divider></el-divider>
          <label style="font-size:25px;font-weight:bold;margin-top:10px">学习坊</label>
          <br>
          <br>
          <div style="border-top:solid #B61B30 5px;text-align:left">
            <li
              :title="item.name"
              v-for="(item,index) in studydata"
              :key="index"
              class="study"
              @click="jump(item)"
            >
              {{item.name}}
            </li>
          </div>
        </el-main>
        <el-aside
          width="30%"
          style="text-align:left;"
        >
          <label style="font-size:25px;font-weight:bold">竞赛</label>
          <div style="text-align:left;border-top:solid #7EBFA7 5px; margin-top:10px;margin-bottom:10px;"></div>
          <img
            src="../assets/蓝桥杯.png"
            width="95%"
            id="imggg"
            @click="lanqiao"
          >
          <el-divider></el-divider>
          <li
            :title="item.name"
            v-for="(item,index) in contestdata"
            :key="index"
            @click="jump(item)"
          >
            {{item.name}}
          </li>
        </el-aside>
      </el-container>
    </el-main>
  </el-container>
</template>

<script>
import Hotquestion from '../components/Hotquestion.vue'
export default {
  name: 'Home',
  components: {
    Hotquestion,
  },
  watch: {
    '$route'(to,from)
    {
      this.$router.go(0)
    }
  },
  data(){
    return{
      imglist:[
        {url:require('../assets/图片1.jpg'),link:"http://www.usst.edu.cn/2020/0427/c34a37330/page.htm"},
        {url:require('../assets/usstacm.jpg'),link:"http://cec.usst.edu.cn/2019/1203/c6739a198259/page.htm"},
        // {url:require('../assets/contest.jpg'),link:"http://cec.usst.edu.cn/2019/0412/c6642a138047/page.htm"},
      ],
      contestdata:[
        {name:"第十一届蓝桥杯全国软件和信息技术专业人才大赛—省赛",url:"http://dasai.lanqiao.cn/pages/dasai/curren_item.html"},
        {name:"科技园杯”第五届中国“互联网+”大学生创新创业大赛上海理工大学选拔赛通知",url:"http://jwc.usst.edu.cn/2019/0305/c6773a135071/page.htm"},
        {name:"商业精英挑战赛国际贸易专业竞赛通知",url:"http://jwc.usst.edu.cn/2020/0113/c6773a213566/page.htm"},
        {name:"第一届金融理财知识大赛的通知",url:"http://jwc.usst.edu.cn/2019/1108/c6773a196232/page.htm"},
        {name:"全国大学生英语竞赛（NECCS）",url:"http://www.chinaneccs.cn/"},
        {name:"“飞思卡尔杯”全国大学生智能车竞赛",url:"http://www.eepw.com.cn/event/action/freescale_car2012/"},
        {name:"中国“互联网+”大学生创新创业大赛",url:"https://cy.ncss.org.cn/"},
        ],
        studydata:[
        {name:"2019-2020学年第2学期 《大学物理》学习坊活动安排",url:"http://lxy.usst.edu.cn/2020/0324/c2316a216686/page.htm"},
        {name:"2019-2020学年第2学期 《高等数学A(2)》和《线性代数A/B》学习坊活动安排",url:"http://lxy.usst.edu.cn/2020/0324/c2316a216683/page.htm"},
        {name:"2019-2020学年第2学期 理学院辅导答疑安排",url:"http://lxy.usst.edu.cn/2020/0320/c2316a216520/page.htm"},
        {name:"《复变函数与积分变换》学习坊活动时间调整通知",url:"http://lxy.usst.edu.cn/2019/1220/c2316a203888/page.htm"},
        {name:"关于增开高等数学学习坊和答疑辅导的通知",url:"http://lxy.usst.edu.cn/2019/1129/c2316a197928/page.htm"},
        {name:"2019年下半年全国大学英语四、六级等级考试考前须知",url:"http://jwc.usst.edu.cn/2019/1202/c720a198163/page1.htm"},
        {name:"关于2019-2020学年第一学期《军事理论》网络课程开课的通知",url:"http://jwc.usst.edu.cn/2019/0823/c720a176528/page.htm"},
      ],
    }
  },
  methods: {
    linkTo(){
      let activeIndex = this.$refs.carousel.activeIndex;
      // console.log(activeIndex)
      window.open(this.imglist[activeIndex].link);
    },
    handleEdit(index, row) {
      // console.log(index, row);
    },
    handleDelete(index, row) {
      // console.log(index, row);
    },
    jump(val){
      window.open(val.url,'_blank')
    },
    lanqiao(){
      window.open("http://dasai.lanqiao.cn/pages/dasai/curren_item.html")
    }
  }
}
</script>

<style lang = "less" scoped>
.el-aside {
  width: 20%;
  background-color: white;
  .el-card {
    margin: auto;
    margin-top: 10px;
    width: 90%;
    .item {
      margin-bottom: 18px;
      font-size: 14px;
    }
    .clearfix {
      display: flex;
      justify-content: space-between;
      content: "";
      clear: both;
      margin: 0px;
    }
  }
}
.el-carousel__item h3 {
  color: #efefef;
  font-size: 14px;
  opacity: 0.75;
  line-height: 100%;
  margin: 0px;
}
.el-carousel__item {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  .carousel-image {
    width: 100%;
    height: 100%;
  }
}
.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}
.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.el-icon-arrow-down {
  font-size: 12px;
}

.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
li {
  margin-top: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
  font-size: 15px;
}
li:hover {
  color: #11b2b9;
}
.study {
  list-style: none;
  background-image: url("../assets/book.png");
  background-repeat: no-repeat;
  padding-left: 30px;
  background-size: 20px 20px;
}
#imggg {
  cursor: pointer;
  transition: 0.6s;
}
#imggg:hover {
  transform: scale(1.1);
}
</style>
